<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:ice="http://www.icesoft.com/icefaces/component"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ace="http://www.icefaces.org/icefaces/components">


<ui:composition template="/WEB-INF/AdminTemplate/AdminTemplate.xhtml">
	<ui:define name="content">
		<h:panelGrid styleClass="animationHolderParent">
			<h:panelGrid styleClass="animationHolder">
				<h:outputText value="Bounce Effect" />
				<h:graphicImage id="bounce" value="/cssAdmin/images/pic01.jpg"
					alt="i-blue" />
				<ace:animation event="click" name="bounce" />
			</h:panelGrid>
		</h:panelGrid>
		
		<ui:insert name="paging">
			<ui:include src="/paginator.xhtml" />
		</ui:insert>
		<ice:form id="form">
		<ace:panel header="Panel Header" closable="true" toggleable="true">
			<f:facet name="options">
				<ace:menu>
					<ace:menuItem icon="ui-icon" onclick="panel.toggle()"
						value="Toggle"></ace:menuItem>
					<ace:menuItem icon="ui-icon" onclick="panel.close()" value="Close"></ace:menuItem>
				</ace:menu>
			</f:facet>

			<ace:dateTimeEntry id="dateTimeEntryId"
				value="#{yourBean.selectDateProperty}" timeZone="Canada/Mountain"
				pattern="MMM/dd/yyyy"></ace:dateTimeEntry>
		</ace:panel>
			<ace:dataTable binding="#{adminMB.datas}" id="dtAdmin"
				value="#{adminMB.arrAdmin}" var="var"
				paginator="#{dataTablePaginator.paginator}"
				paginatorPosition="#{dataTablePaginator.position}"
				selectionMode="multiple" doubleClickSelect="true"
				page="#{dataTablePaginator.startPage}"
				rows="#{dataTablePaginator.rows}" pageCount="4" rowIndexVar="row">
				<ace:column style="width:50px;" id="STT" headerText="STT"
					footerText="Row #">
					<h:outputText id="rowNumberCell" value="#{row}" />
				</ace:column>
				<ace:column>
					<ice:selectBooleanCheckbox binding="#{adminMB.checkbox}"></ice:selectBooleanCheckbox>
				</ace:column>
				<ace:column filterBy="#{var.username}" filterMatchMode="contains"
					headerText="UserName" sortBy="UserName">
					<ace:cellEditor>
						<f:facet name="output">
							<h:outputText id="usernameCell" value="#{var.username}"></h:outputText>
						</f:facet>
						<f:facet name="input">
							<h:inputText id="usernameInput" value="#{var.username}"></h:inputText>
						</f:facet>
					</ace:cellEditor>
				</ace:column>
				<ace:column filterBy="#{var.address}" filterMatchMode="contains"
					headerText="Address" sortBy="Address">
					<h:outputText value="#{var.address}"></h:outputText>
				</ace:column>
				<ace:column filterBy="#{var.phonenumber}" filterMatchMode="contains"
					headerText="Phone" sortBy="Phone">
					<h:outputText value="#{var.phonenumber}"></h:outputText>
				</ace:column>
				<ace:column headerText="Gender" sortBy="Gender">
					<h:outputText value="Nam" rendered="#{var.sex==true}"></h:outputText>
					<h:outputText value="Nữ" rendered="#{var.sex==false}"></h:outputText>
				</ace:column>
				<ace:column id="options" headerText="Options">
					<ace:rowEditor id="editor" />
				</ace:column>
			</ace:dataTable>
			<ice:commandButton value="test row selected"
				action="#{adminMB.submit}"></ice:commandButton>
			<ice:commandButton value="Thêm" action="#{adminMB.doAdd}"></ice:commandButton>
			<ice:commandButton value="Sửa" action="#{adminMB.doEdit}"></ice:commandButton>
			<ice:commandButton value="Xóa" action="#{adminMB.doDelete}"></ice:commandButton>
		</ice:form>
	</ui:define>
</ui:composition>

</html>

